import styles from './index.less';
import './index.less'
import React, { useEffect, } from "react"
import { Carousel, BackTop } from "antd"
import { IRouteComponentProps, useSelector, useDispatch, Link } from 'umi'
import { labelItem, listItem, tagslistItem } from "@/utils/Article"
import ArticleItem from "@/components/articleItem"
import '../static/font_article/iconfont.css'
import theTime from '@/services/module';


const IndexPage: React.FC<IRouteComponentProps> = (props) => {
  const dev = useSelector((state: { Article: any; }) => state.Article)
  const dispatch = useDispatch()
  // console.log(dev, "dev....");

  let params={
    page:1,
    pageSize: 12,
    status: 'publish'
  }

  useEffect(() => {
    dispatch({
      type: "Article/gettags",
      payload:params
      
    }),
      dispatch({
        type: "Article/getswiper"
      }),
      dispatch({
        type: "Article/getArticlelist"
      }),
      dispatch({
        type: 'Article/readinglist'
      });
    dispatch({
      type: 'Article/getlabel'
    });
  }, [])


  return (
    <div className="index">
      {/* 轮播图 */}
      <div className="swiper">
        <Carousel autoplay className='Carousel'>
          {

            dev.swiperlist && dev.swiperlist.map((item: listItem, index: number) => {

              return <Link to={`/Article/Detail?id=${item.id}`} key={item.id}>
                <div className="swiperitem"  >

                  <div>
                    <h2>{item.title}</h2>
                    <p>大约{theTime(item.createAt)} <span>{item.views}次阅读</span></p>
                  </div>

                  <img src={item.cover} alt="" className="img" />
                </div>
              </Link>
            })
          }
        </Carousel>
      </div>
      <div className="main">
        <div className="top">
          <div className="tags">
            <span>所有</span>
            {
              dev.tagslist && dev.tagslist.map((item: tagslistItem, index: number) => {
                return <span key={index}>{item.label}</span>
              })
            }
          </div>
        </div>
        <div className="article">
          {
            dev.articlelist.map((item: listItem, index: number) => {
                return <ArticleItem item={item} key={index} />
            })
          }
        </div>
      </div>
      <BackTop className="gotop">
        <div>
          <i className="iconfont icon-huidaodingbu"></i>
        </div>
      </BackTop>
    </div>
  );
}
export default IndexPage
